<template>
  <div
      class="showPanel flex flex-col gap-y-[20px] h-full animate__animated transitionPanel relative animate__fadeInRight"
  >
    <div class="relative h-full text-[#fff]">
      <div
          class="absolute flex flex-col gap-y-[20px] top-0 left-0 right-0 bottom-0 pt-[50px] pl-[10px] pb-[50px]"
      >
        <base-card class="flex-1 overflow-hidden" title="企业用工需求总数">
          <base-chart :options="topOption"></base-chart>
        </base-card>
        <base-card class="flex-1 overflow-hidden" title="用工需求明细">
          <a-input class="custom-input" placeholder="输入唯一码搜索">
            <!--            <template #prefix>-->
            <!--              <SearchOutlined />-->
            <!--            </template>-->
          </a-input>
          <base-table
              :show-tool="false"
              :column="column"
              :data-source="tableData"
              :show-pagination="false"
              class="reset-table"
          ></base-table>
        </base-card>
        <base-card class="flex-1 overflow-hidden" title="工作经验分析">
          <base-chart :options="bottomOption"></base-chart>
        </base-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import BaseCard from "@/components/three/component/baseCard.vue";
import BaseChart from "@/components/three/component/baseChart/index.jsx";
import {onMounted, ref, h} from "vue";
import {CommonEchartLegend} from "@/utils/index.js";
import BaseTable from "@/components/three/component/baseTable/index.jsx";
// import { SearchOutlined } from "@ant-design/icons-vue";
let dataMap = {
  本科学士及以上: {
    value: 10,
    percent: "25%",
  },
  大专及同等: {
    value: 10,
    percent: "25%",
  },
  高中中专中技: {
    value: 10,
    percent: "25%",
  },
  硕士研究生: {
    value: 10,
    percent: "25%",
  },
  博士及以上: {
    value: 5,
    percent: "12.5%",
  },
  不限: {
    value: 5,
    percent: "12.5%",
  },
};
let ser_data = [
  {
    value: 10,
    name: "本科学士及以上",
  },
  {
    value: 10,
    name: "大专及同等",
  },
  {
    value: 10,
    name: "高中中专中技",
  },
  {
    value: 10,
    name: "硕士研究生",
  },
  {
    value: 5,
    name: "博士及以上",
  },
  {
    value: 5,
    name: "不限",
  },
];
const topOption = ref({
  backgroundColor: "rgba(0,0,0,0)",
  title: [
    {
      text: "本科学士及以上",
      top: "45%",
      left: "20%",
      padding: [0, 0, 0, -20],
      textStyle: {
        color: "#3FAA90",
        fontSize: 14,
        fontWeight: "bold",
      },
    },
  ],
  tooltip: {
    show: false,
    trigger: "item",
  },
  legend: {
    ...CommonEchartLegend,
    orient: "vertical",
    right: "5%",
    top: "middle",
    formatter: (name) => {
      return `${name}  ${dataMap[name].value}`;
    },
  },
  series: [
    {
      type: "pie",
      radius: ["45%", "65%"],
      center: ["28%", "50%"],
      label: {
        show: false,
      },
      data: ser_data,
    },
  ],
});
const column = ref([
  {
    dataIndex: "type",
    align: "center",
    key: "type",
    label: "行业分类",
  },
  {
    dataIndex: "name",
    align: "center",
    key: "name",
    label: "企业名称",
  },
  {
    dataIndex: "number",
    align: "center",
    key: "number",
    label: "需求人数",
  },
]);
const tableData = ref([
  {
    type: "制造业",
    name: "某某科技有限公司",
    number: 100,
  },
  {
    type: "服务业",
    name: "某某服务有限公司",
    number: 50,
  },
  {
    type: "建筑业",
    name: "某某建筑有限公司",
    number: 30,
  },
  {
    type: "农业",
    name: "某某农业有限公司",
    number: 20,
  },
]);
let ser_data1 = [
  {
    value: 10,
    name: "正常生产",
  },
  {
    value: 10,
    name: "季节性停产",
  },
  {
    value: 10,
    name: "新增在建",
  },
  {
    value: 10,
    name: "其他暂时停产",
  },
];
let ser_data2 = [
  {
    value: 10,
    name: "5年以上",
  },
  {
    value: 10,
    name: "4-5年",
  },
  {
    value: 10,
    name: "3-4年",
  },
  {
    value: 10,
    name: "3年以下",
  },
];

const bottomOption = ref({
  backgroundColor: "rgba(0,0,0,0)",
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "0%",
    right: "5%",
    bottom: "3%",
    top: "10%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
    axisLabel: {
      color: "#fff",
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255, 255, 255, 0.1)",
      },
    },
  },
  yAxis: {
    type: "category",
    data: ser_data2.map((item) => item.name),
    axisLabel: {
      color: "#fff",
      rotate: 30,
    },
    axisTick: {show: false},
    axisLine: {
      lineStyle: {
        color: "#ccc",
      },
    },
  },
  series: [
    {
      type: "bar",
      data: ser_data1.map((item) => item.value),
      barWidth: 14,
      label: {
        show: true,
        position: "right",
        color: "#B0E3E3",
      },
      itemStyle: {
        borderRadius: [0, 4, 4, 0],
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {offset: 0, color: "#6E92CE"},
            {offset: 0.5, color: "#5A8DE0"},
            {offset: 1, color: "#97E1DC"},
          ],
        },
      },
    },
  ],
});
onMounted(() => {
});
</script>
<style scoped lang="less">
.custom-input {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;

  &::placeholder {
    color: #fff;
    opacity: 0.6;
  }

  &:hover,
  &:focus {
    border-color: #3faa90;
    box-shadow: none;
  }

  input {
    background-color: transparent;
    color: #fff;
  }
}
</style>
